<template>
	<view class="content-componet" :class="className" :style="parentStyle">
		<view class="top-img" :style="imgStyle" :class="classType"></view>
		<slot></slot>
	</view>
</template>

<script setup lang="ts">
	import { computed } from 'vue';
	const props = defineProps({
		type: {
			required: true,
			type: String, // win | can | cannot
		},
		imgStyle:Object,
		parentStyle:Object,
		className: {
			required: false,
			type: String,
			default: ''
		}
	})
	const classType = computed(() => {
		return props.type
	})
</script>

<style scoped lang="scss">
	.content-componet {
		min-width: 630upx;
		min-height: 582upx;
		background: linear-gradient(180deg, #FADABC 0%, #FFFFFF 51%, #F4F1E9 100%);
		border-radius: 40upx;
		position: relative;

		.top-img {
			position: absolute;
			display: flex;
			justify-content: center;
			top: 0;
		}

		.win {
			width: 272upx;
			height: 234upx;
			background: url("/static/images/global-notice/win.png") 0 0 no-repeat;
			background-size: cover;
		}

		.can {
			width: 270upx;
			height: 190upx;
			background: url("/static/images/global-notice/can.png") 0 0 no-repeat;
			background-size: cover;
		}

		.cannot {
			width: 226upx;
			height: 226upx;
			background: url("/static/images/global-notice/cannot.png") 0 0 no-repeat;
			background-size: cover;
		}
	}
</style>